<template>
  <div class="news_box" :style="styleObj">
    <router-link to="/register">
      <img src="../assets/news.png" alt="" />
    </router-link>
    <div class="btn" @click="close" ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleObj: {
        height: '60px'
      },
    };
  },
  methods: {
    close() {
      this.styleObj.height = '0'
    },
  },
};
</script>

<style scoped lang="scss">
.news_box {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #72b078;
  overflow: hidden;
  transition: all 1s;
  a {
    display: inline-block;
    width: 100%;
    height: 60px;
    text-align: center;
    img {
      width: 1200px;
      height: 60px;
    }
  }
  .btn {
    position: absolute;
    top: 50%;
    right: 44px;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    background-image: url("../assets/spirit.png");
    background-position: -456px -414px;
    background-size: 589px;
    cursor: pointer;
  }
}
</style>
